<template>
	<view >
		
		<!-- <g-navigation title="邀请好友" :background="'#FFFFFF'" leading :color="'#000000'" /> -->
		<view style="height: 67upx;"></view>
		<view class="column-div bg-image-view">
			<view style="margin-bottom: 24upx;">
				<text class="num">28</text>
				<text class="people">人</text>
			</view>
			<view style="margin-bottom: 110upx;">
				<text>成功邀请好友人数</text>
				<uni-icons style="margin-left: 12upx;font-size: 20upx;" type="arrowright" color="#FFFFFF" />
			</view>
		</view>
		
		<view style="padding: 0upx 30upx;">
			<view class="column-div contribute-view">
				<view class="row-start contribute-li" style="">
					<view class="column-between" style="width: 100%;">
						<text class="num">200.00</text>
						<text class="title">昨日贡献值</text>
					</view>
					<view class="border-view"></view>
					<view class="column-between" style="width: 100%;">
						<text class="num">500.00</text>
						<text class="title">今日贡献值</text>
					</view>
					<view class="border-view"></view>
					<view class="column-between" style="width: 100%;">
						<text class="num">34268.00</text>
						<text class="title">累计贡献值</text>
					</view>
				</view>
				<view class="time">数据更新于2020.03.31 12:36:15</view>
			</view>
			
			<view class="activityRules-view">
				<image :src="image.card"></image>
				<view class="activityRules-content">
					<view class="row-div">
						<image :src="image.xie" mode=""></image>
						<text class="title">活动规则</text>
						<image :src="image.xie" mode=""></image>
					</view>
					
					<view class="activityRules-text">
						<view style="margin-bottom: 44upx;">
							<view class="row-start">
								<image class="question" :src="image.shuoming"></image>
								<text class="title-text">如何推广？</text>
							</view>
							<view class="row-start dot" style="margin-top: 22upx; margin-bottom: 15upx;">点击底部按钮，将链接或图片分享给好友。</view>
							<view class="row-start dot">分享商品或文章给好友，好友点击打开。</view>
						</view>
						<view style="margin-bottom: 45upx;">
							<view class="row-start">
								<image class="question" :src="image.shuoming"></image>
								<text class="title-text" >如何才算推广成功？</text>
							</view>
							<view style="margin-left: 0upx;margin-top: 11upx;">
								<view class="row-start dottow " style="align-items: flex-start;">
									<view style="flex: 1;">新用户首次打开您分享的链接，并注册成功，则记录您为该用户的永久推广人，得到贡献值奖励。</view>
								</view>
							</view>
						</view>
						<view class="dottedLine"></view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="bottom-view">
			<image :src="image.bottom"></image>
			<view class="row-between imageBottom-view">
				<view class="imageBottom">
					<image :src="image.buttonOne"></image>
					<text>分享链接推广</text>
				</view>
				<view class="imageBottom">
					<image :src="image.buttonTow"></image>
					<text>保存推广图片</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image:{
					// bg:'/static/assets/bg4.png',
					card:'/static/assets/card.png',
					xie:'/static/assets/xie.png',
					shuoming:'/static/assets/shuoming2.png',
					bottom:'/static/assets/bottom.png',
					buttonOne:'/static/assets/button1.png',
					buttonTow:'/static/assets/button2.png',
				}
			}
		},
		methods: {
			
		}
	}
</script>
<style scoped lang="scss">
	page{
		background: linear-gradient(0deg, #FF1C00 0%, #FF8A00 100%);
	}
	.bg-image-view{
		// background-image: url('/static/assets/bg4.png');
		background-size: 100%;
		width: 100%;
		height: 469upx;
		justify-content: flex-end;
		font-size: 28upx;
		font-weight: bold;
		color: #FFFFFF;
		font-family: PingFang SC;
		text-shadow: 0px 2upx 3upx rgba(230, 66, 46, 0.3);
		.num{
			font-size: 70upx;
		}
		.people{
			font-size: 34upx;
			font-weight: 500;
		}
	}
	.contribute-view{
		background: #FFFFFF;
		border-radius: 15upx;
		position: relative;
		z-index: 3;
		padding: 56upx 0upx 27upx 0upx ;
		margin-bottom: 26upx;
		font-size: 36upx;
		font-family: PingFang SC;
		color: #333333;
		.contribute-li{
			width: 100%;
			margin-bottom: 44upx;
			.num{
				font-size: 36upx;
				font-weight: bold;
				margin-bottom: 28upx;
			}
			.border-view{
				height: 56upx;
				border-right: 2upx solid;
				border-color: rgba(210, 23, 40, 0.3);
			}
			.title{
				font-size: 24upx;
				font-weight: 500;
				color: #666666;
			}
		}
		.time{
			font-size: 22upx;
			font-weight: 500;
			color: #BFBFBF;
		}
	}
	.activityRules-view{
		position: relative;
		image{
			width: 690upx;
			height: 972upx;
		}
		.activityRules-content{
			width: 100%;
			position: absolute;
			top: 45upx;
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			image{
				width: 40upx;
				height: 31upx;
			}
			.title{
				margin-left: 26upx;
				margin-right: 26upx;
			}
			.activityRules-text{
				padding: 46upx 80upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				.question{
					width: 27upx;
					height: 26upx;
				}
				.title-text{
					font-size: 28upx;
					font-weight: bold;
					color: #FE5E49;
					margin-left: 15upx;
				}
				.dot{
					margin-left: 26upx;
					&::before{
						content: " ";
						width: 6upx;
						height: 6upx;
						background: #FE5E49;
						border-radius: 50%;
						margin-right: 11upx;
					}
				}
				.dottow{
					margin-left: 26upx;
					&::before{
						content: " ";
						width: 6upx;
						height: 6upx;
						background: #FE5E49;
						border-radius: 50%;
						margin-right: 11upx;
						margin-top: 14upx;
					}
				}
				.dottedLine{
					width: 531upx;
					border: 1upx dashed #D21728;
				}
			}
		}
		
	}
	.bottom-view{
		margin-top: 76upx;
		position: relative;
		image{
			width: 100%;
			height: 370upx;
			bottom: -10upx;
		}
		.imageBottom-view{
			width: 100%;
			position: absolute;
			bottom: 93upx;
			padding: 0upx 30upx;
			.imageBottom{
				position: relative;
				image{
					width: 320upx;
					height: 82upx;
				}
				text{
					position: absolute;
					top: 0upx;
					left: 0upx;
					padding: 30upx 77upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
		
	}
	
</style>
